<template>

  <el-date-picker v-model="innerValue"
                  :disabled="$attrs['disabled']||false"
                  :placeholder="$attrs['placeholder']||'请选择'"
                  :clearable="$attrs['clearable']"
                  :type="$attrs['type']||'date'"
                  :size="$attrs['size']"
                  :picker-options="$attrs['picker-options']"
                  :default-time="$attrs['default-time']"
                  @change="(vakue)=>changeValue(vakue)"
                  @blur="(vakue)=>{
                      $emit('blur',vakue)
                  }"
                  value-format="yyyy-MM-dd HH:mm:ss"

  ></el-date-picker>
<!--
                  :format="computedFomat()"
-->
</template>
<script>

import { dateFormatYYYYMMDDHHmmss, isIOS } from '@/utils'

 function adapterIOS(str){
   if (isIOS()) {
     str = str?.replace(/-/g, '/')
   }
   return str
 }

  export default {
    props: {
      value: [String, Object, Number, Date],
    },
    data() {
      return {
        timePickerOption: {
          disabledDate(time) {
            const dateTime = new Date();
            const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
            return time.getTime() < new Date(startDateTime).getTime();
          },
        },
        innerValue: adapterIOS(dateFormatYYYYMMDDHHmmss(this.$props.value||undefined)),
      };
    },

    watch: {
      "$props.value"(_val) {
        this.innerValue = adapterIOS(dateFormatYYYYMMDDHHmmss(_val))
      },
    },
    mounted() {
    },
    destroyed() {
      this.innerValue = undefined
    },


    methods: {
      computedFomat() {
       var _datetype=this.$attrs['type']||'date'
        if(_datetype=='month'){
          return 'yyyy-MM'
        }  if(_datetype=='date'){
       return 'yyyy-MM-dd'
       }else if(_datetype=='datetime'){
         return 'yyyy-MM-dd HH:mm:ss'
       }else if(_datetype=='month'){
         return 'yyyy-MM'
       }
        return 'yyyy-MM-dd'
      },

      changeValue(val) {
        console.log('日期修改', val);
        if (!val) {
          this.$emit('input', undefined);
          return false;
        }
        this.innerValue=val;
        this.$emit('input', val);
        console.log("-> changeValue datepicker val", val);
        this.$emit('change',val);
      },
    },
  };
</script>
